<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Roger | Roger</title>
    <meta name="description" content="A VitePress site">
    <link rel="preload stylesheet" href="/docs/assets/style.688cd82e.css" as="style">
    
    <script type="module" src="/docs/assets/app.73a16568.js"></script>
    <link rel="preload" href="/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/docs/assets/chunks/framework.906ebc88.js">
    <link rel="modulepreload" href="/docs/assets/chunks/theme.df409c6c.js">
    <link rel="modulepreload" href="/docs/assets/pages_interview_HC_index.md.50eee13c.lean.js">
    <link rel="icon" href="favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-255ec12d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-255ec12d data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-0937f67c><div class="container" data-v-0937f67c><div class="title" data-v-0937f67c><div class="VPNavBarTitle has-sidebar" data-v-0937f67c data-v-86d1bed8><a class="title" href="/docs/" data-v-86d1bed8><!--[--><!--]--><!----><!--[-->Roger<!--]--><!--[--><!--[--><!--[--><!--[--><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-0937f67c><div class="curtain" data-v-0937f67c></div><div class="content-body" data-v-0937f67c><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-0937f67c><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-0937f67c data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/frontend/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/browser/Chrome/eventLoop/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>浏览器</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/interview/Vue/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>面试题</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docs/pages/source/Vue/render/" tabindex="0" data-v-7f418b0f data-v-0b525393><!--[--><span data-v-0b525393>框架源码</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-0937f67c data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-0937f67c data-v-40855f84 data-v-a7b5672a><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-a7b5672a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-a7b5672a><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-a7b5672a><div class="VPMenu" data-v-a7b5672a data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-0937f67c data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-255ec12d data-v-5cfd5582><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-5cfd5582><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-5cfd5582><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-5cfd5582>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-5cfd5582 data-v-18201f51><button data-v-18201f51>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-255ec12d data-v-845b8fc6><div class="curtain" data-v-845b8fc6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-845b8fc6><span class="visually-hidden" id="sidebar-aria-label" data-v-845b8fc6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>前端</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/frontend/HTML/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>HTML</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/frontend/CSS/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>CSS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>浏览器</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/browser/Chrome/eventLoop/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>事件循环</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/browser/Chrome/render/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>渲染原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible collapsed" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>源码解析</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><section class="VPSidebarItem level-1 collapsible collapsed" data-v-9b797284 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h3 class="text" data-v-9b797284>Vue</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/render/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>模版渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/lifeCycle/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>生命周期</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/dataProxy/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>data数据代理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/nextTick/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>nextTick</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/Vue/watch/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>watch监听</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible collapsed" data-v-9b797284 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h3 class="text" data-v-9b797284>React</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/PureComponent/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>PureComponent原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/router/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>React路由配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/source/React/setState/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>setState使用及原理</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="group" data-v-845b8fc6><section class="VPSidebarItem level-0 collapsible has-active" data-v-845b8fc6 data-v-9b797284><div class="item" role="button" tabindex="0" data-v-9b797284><div class="indicator" data-v-9b797284></div><h2 class="text" data-v-9b797284>面试题</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-9b797284><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-9b797284><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-9b797284><!--[--><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/interview/Vue/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>Vue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-9b797284 data-v-9b797284><div class="item" data-v-9b797284><div class="indicator" data-v-9b797284></div><a class="VPLink link link" href="/docs/pages/interview/HC/" data-v-9b797284><!--[--><p class="text" data-v-9b797284>HTML&CSS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-255ec12d data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _docs_pages_interview_HC_index" data-v-6b87e69f><div><h2 id="chrome-盒模型和-ie-盒模型" tabindex="-1">Chrome 盒模型和 IE 盒模型 <a class="header-anchor" href="#chrome-盒模型和-ie-盒模型" aria-label="Permalink to &quot;Chrome 盒模型和 IE 盒模型&quot;">​</a></h2><ul><li>标准的盒子模型组成部分： margin + border + padding + content</li><li>IE 盒子模型组成部分： margin + content(border + padding + content)</li></ul><blockquote><p>两者的区别在于 content 内容部分，IE 的 content 由(border + padding + content)组成，通常我们在写样式时 IE 盒子模型会比较可控，Chrome 盒子模型在添加 padding/border 时会额外增加宽度/高度，所有使用 IE 盒子模型则不需要考虑宽高，设置的值为多少就多少</p></blockquote><h2 id="标签元素" tabindex="-1">标签元素 <a class="header-anchor" href="#标签元素" aria-label="Permalink to &quot;标签元素&quot;">​</a></h2><ol><li>行内元素</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">a</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">b</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">strong</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">input</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">textarea</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">select</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">em</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">del</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>块元素</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">address</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#FDAEB7;font-style:italic;">center</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">h1</span><span style="color:#E1E4E8;">&gt;~&lt;</span><span style="color:#85E89D;">h6</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">pre</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">ul</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">ol</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">dl</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">table</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;">&gt;、&lt;</span><span style="color:#85E89D;">form</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>单标签</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">br</span><span style="color:#E1E4E8;"> /&gt;、</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">hr</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">、&lt;</span><span style="color:#85E89D;">img</span><span style="color:#E1E4E8;"> /&gt;、&lt;</span><span style="color:#85E89D;">input</span><span style="color:#E1E4E8;"> /&gt;、</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">param</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">、&lt;</span><span style="color:#85E89D;">meta</span><span style="color:#E1E4E8;"> /&gt;、&lt;</span><span style="color:#85E89D;">link</span><span style="color:#E1E4E8;"> /&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="4"><li>es6 新增标签</li></ol><ul><li>section：表示页面中的一个内容区块</li><li>article：表示页面中的一块与上下文不相关的强立内容</li><li>aside：表示 article 元素的内容之外的</li><li>header：表示页面中一个内容区块或整个页面的标题</li><li>footer：表示整个页面或页面中一个内容区块的脚注；一般会包含创作者的姓名、创作日期以及创作者联系信息</li><li>nav：表示页面中导航链接的部分</li><li>figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用 figcaption 元素为 figure 元素组添加标题</li><li>video：定义视频</li><li>audio：定义音频</li><li>embed：用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3 等</li><li>mark：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字</li><li>meter:进度<div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">meter</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">value</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;2&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">min</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">max</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;10&quot;</span><span style="color:#E1E4E8;">&gt;2 out of 10&lt;/</span><span style="color:#85E89D;">meter</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">br</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">meter</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">value</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0.6&quot;</span><span style="color:#E1E4E8;">&gt;60%&lt;/</span><span style="color:#85E89D;">meter</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li><li>progress：表示运行中的进程，可以用 progress 元素显示 JS 中耗费时间的函数的进程<div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">progress</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">value</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;22&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">max</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;100&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">progress</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></li><li>time：表示日期或时间，也可以同时表示两者</li><li>ruby：表示 ruby 注释(中文注音或字符)</li><li>rt：表示字符(中文注音或字符)的解释或发音</li><li>canvas：表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块面 布，但它把一个绘图 API 展现给客户端 JavaScript</li><li>command：表示命令按钮， 比如单选按钮、复选框或按钮</li></ul><h3 id="行内元素和块级元素的区别" tabindex="-1">行内元素和块级元素的区别 <a class="header-anchor" href="#行内元素和块级元素的区别" aria-label="Permalink to &quot;行内元素和块级元素的区别&quot;">​</a></h3><ol><li>行内元素和块级元素可以通过 display 属性相互转换 ( block:块元素 inline:行内元素 inline-block 块元素)</li><li>块元素的特点： 独占一行，宽度 100%</li><li>行内元素的特点： 多个行内元素会并排显示，宽高由内容撑起，不可以设置盒子宽高，外边距设置 left/right 会失效</li><li>行内块则包含了块元素和行内元素的特点，宽高由内容撑起，可以设置宽高，外边距有效</li></ol><h2 id="bfc" tabindex="-1">BFC <a class="header-anchor" href="#bfc" aria-label="Permalink to &quot;BFC&quot;">​</a></h2><ol><li><strong><em>BFC 全称 Block Formatting Context</em></strong> 块级格式化上下文</li><li>BFC 的特性就是内部元素不会影响到外部元素</li></ol><h3 id="触发-bfc-条件" tabindex="-1">触发 BFC 条件 <a class="header-anchor" href="#触发-bfc-条件" aria-label="Permalink to &quot;触发 BFC 条件&quot;">​</a></h3><ol><li>根元素</li><li>浮动元素。元素的 float 不是 none</li><li>绝对定位元素。元素的 position 为 absolute 或 fixed</li><li>行内块元素。元素的 display 为 inline-block</li><li>表格单元格。元素的 display 为 table-cell，HTML 表格单元格默认为该值</li><li>表格标题。元素的 display 为 table-caption，HTML 表格标题默认为该值</li><li>匿名表格单元格元素。元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table</li><li>overflow 值不为 visible 的块元素</li><li>弹性元素。display 为 flex 或 inline-flex 元素的直接子元素</li><li>网格元素。display 为 grid 或 inline-grid 元素的直接子元素</li></ol><h2 id="flex-弹性盒子" tabindex="-1">flex 弹性盒子 <a class="header-anchor" href="#flex-弹性盒子" aria-label="Permalink to &quot;flex 弹性盒子&quot;">​</a></h2><p>设为  <code>flex</code>  布局以后，子元素的  <code>float、clear</code>  和<code>vertical-align</code>属性将失效</p><p>使用 flex 布局可以更便捷快速的进行布局</p><h3 id="flex-常用属性" tabindex="-1">flex 常用属性 <a class="header-anchor" href="#flex-常用属性" aria-label="Permalink to &quot;flex 常用属性&quot;">​</a></h3><ol><li>display: flex; 把盒子转换为 flex 布局</li><li>flex-direction: column; 设置主轴方向</li><li>flex-wrap: wrap; 是否换行显示</li><li>justify-content: center; 主轴方向的子元素排列方式</li><li>align-item: center; 侧轴方向的子元素排列方向</li><li>...</li></ol><h2 id="h5-新特性" tabindex="-1">H5 新特性 <a class="header-anchor" href="#h5-新特性" aria-label="Permalink to &quot;H5 新特性&quot;">​</a></h2><ul><li><code>Canvas绘图</code></li><li><code>SVG绘图</code></li><li><code>地理定位</code></li><li><code>Web Worker</code></li><li><code>web worker</code>  是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。</li><li><code>Web Storage</code></li><li>1.Cookie 技术 （ 兼容性好,数据不能超 4kb,操作复杂）</li><li>2.（兼容性差,数据 8MB,操作简单）sessionStorage</li><li>3.localStorage</li><li>(6)<code>Web Socket</code></li><li>WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。</li></ul><h2 id="position-有哪些属性" tabindex="-1">position 有哪些属性 <a class="header-anchor" href="#position-有哪些属性" aria-label="Permalink to &quot;position 有哪些属性&quot;">​</a></h2><p><strong>1. position: relative;相对定位</strong></p><p><strong>2. position: absolute;绝对定位</strong></p><p><strong>3. position: fixed;固定定位</strong></p><p><strong>4. position:static</strong>：<strong>默认值</strong></p><p><strong>5. position: sticky 粘性定位</strong></p><p><strong>6. position: inherit 规定应该从父元素继承 position 属性的值</strong></p><p><strong>7. position: initial 设置该属性为默认值</strong></p><h2 id="_1px-1rem-1vh-1em-各自代表的含义" tabindex="-1">1px，1rem，1vh，1em 各自代表的含义 <a class="header-anchor" href="#_1px-1rem-1vh-1em-各自代表的含义" aria-label="Permalink to &quot;1px，1rem，1vh，1em 各自代表的含义&quot;">​</a></h2><p>px</p><p>代表 1 个像素相对于你的电脑分辨率，分辨率不同 1px 大小也不一样</p><p>rem</p><p>相对于 html 根元素的字体大小，通常在移动端适配不同屏幕尺寸时使用</p><p>vh</p><p>相对于浏览器可视窗口，相当于屏幕高度的 1%</p><p>em</p><p>相对于该元素的字体大小</p><h2 id="什么是-spa" tabindex="-1">什么是 SPA？ <a class="header-anchor" href="#什么是-spa" aria-label="Permalink to &quot;什么是 SPA？&quot;">​</a></h2><p>单页面应用，全称**<em>Single Page Application</em>**,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面。它将所有活动局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的 HTML、JavaScript、css。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或者跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现 UI 与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容 Region(区域)中的视图切换来展示内容。</p><blockquote><p>单页面应用的关键就是通过路由进行不同组件的切换，实现不同页面的效果</p></blockquote><blockquote><p><strong>缺点：</strong></p><ul><li>1.不利于 SEO。</li><li>2.初次加载耗时相对增多。</li><li>3.导航不可用，如果一定要导航需要自行实现前进、后退。</li></ul></blockquote><h2 id="优雅降级与渐进增强" tabindex="-1">优雅降级与渐进增强 <a class="header-anchor" href="#优雅降级与渐进增强" aria-label="Permalink to &quot;优雅降级与渐进增强&quot;">​</a></h2><p><strong>优雅降级</strong>： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p><p><strong>渐进增强</strong>： 先实现最基本的功能，根据一些高级浏览器进行效果和交互上追加功能</p><h2 id="浮动的原理和清除浮动" tabindex="-1">浮动的原理和清除浮动 <a class="header-anchor" href="#浮动的原理和清除浮动" aria-label="Permalink to &quot;浮动的原理和清除浮动&quot;">​</a></h2><p>浮动的元素会脱离文档流，不占位置，浮动元素碰到包含他的边框或者其他浮动的元素的边框会停留</p><ol><li><p>在末尾添加一个标签，添加 css 属性，clear：both，缺点就是添加了没有意义的标签</p></li><li><p>使用 after 伪元素清楚浮动</p></li></ol><p>这个方法只能在非 IE 浏览器使用，要注意给伪元素的 height 设置为 0</p><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#B392F0;">.clearfix::after</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">content</span><span style="color:#E1E4E8;">: </span><span style="color:#9ECBFF;">&quot;&quot;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">display</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">block</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">visible</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">hidden</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">height</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">clear</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">both</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>溢出隐藏</li></ol><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#E1E4E8;">浮动元素的父元素 {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">overflow</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">hidden</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>浮动外部元素</li></ol><h2 id="如何让一个盒子在页面上水平垂直居中" tabindex="-1">如何让一个盒子在页面上水平垂直居中 <a class="header-anchor" href="#如何让一个盒子在页面上水平垂直居中" aria-label="Permalink to &quot;如何让一个盒子在页面上水平垂直居中&quot;">​</a></h2><ol><li>已知宽高的情况下</li></ol><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki github-dark"><code><span class="line"><span style="color:#85E89D;">div</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">position</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">absolute</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">left</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">right</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">bottom</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">top</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">0</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">margin</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">auto</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="html-5-和-h5-的区别" tabindex="-1">html 5 和 H5 的区别 <a class="header-anchor" href="#html-5-和-h5-的区别" aria-label="Permalink to &quot;html 5 和 H5 的区别&quot;">​</a></h3><p>H5 指的的是移动端的 Web 页面</p><p>HTML5 其实是一种技术的集合，它包括了 HTML5，CSS3，JS 等技术。很多新技术都是 html5 提供的，比如：</p><ol><li>audio</li><li>video</li><li>canvas</li><li>localStorage</li><li>sessionStorage</li><li>音频处理</li><li>等等。。。。。</li></ol><h3 id="target-和-currenttarget-的区别" tabindex="-1">target 和 currentTarget 的区别 <a class="header-anchor" href="#target-和-currenttarget-的区别" aria-label="Permalink to &quot;target 和 currentTarget 的区别&quot;">​</a></h3></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-37656e44><!--[--><!--]--><!----><nav class="prev-next" data-v-37656e44><div class="pager" data-v-37656e44><a class="pager-link prev" href="/docs/pages/interview/Vue/" data-v-37656e44><span class="desc" data-v-37656e44>Previous page</span><span class="title" data-v-37656e44>Vue</span></a></div><div class="pager" data-v-37656e44><!----></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"pages_browser_chrome_eventloop_index.md\":\"5289ad5f\",\"pages_frontend_css_index.md\":\"33d7f8f0\",\"pages_frontend_js_index.md\":\"071be8ee\",\"pages_source_vue_dataproxy_index.md\":\"2190e5bb\",\"pages_source_react_router_index.md\":\"aee956e0\",\"pages_frontend_html_index.md\":\"d07d2697\",\"pages_frontend_index.md\":\"9602a34e\",\"pages_source_vue_render_index.md\":\"82ef8cd2\",\"index.md\":\"f1fd9f38\",\"pages_source_vue_lifecycle_index.md\":\"e821fde5\",\"pages_source_vue_nexttick_index.md\":\"77c4fcb8\",\"pages_source_react_setstate_index.md\":\"79ab1da8\",\"pages_browser_chrome_render_index.md\":\"ef66fcb1\",\"pages_source_vue_watch_index.md\":\"07309914\",\"pages_source_react_purecomponent_index.md\":\"1489604b\",\"pages_interview_hc_index.md\":\"50eee13c\",\"pages_interview_vue_index.md\":\"26456aa4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Roger\",\"description\":\"A VitePress site\",\"base\":\"/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端\",\"link\":\"/pages/frontend/\"},{\"text\":\"浏览器\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"面试题\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"框架源码\",\"link\":\"/pages/source/Vue/render/\"}],\"sidebar\":[{\"text\":\"前端\",\"collapsed\":true,\"items\":[{\"text\":\"HTML\",\"link\":\"/pages/frontend/HTML/\"},{\"text\":\"CSS\",\"link\":\"/pages/frontend/CSS/\"}]},{\"text\":\"浏览器\",\"collapsed\":true,\"items\":[{\"text\":\"事件循环\",\"link\":\"/pages/browser/Chrome/eventLoop/\"},{\"text\":\"渲染原理\",\"link\":\"/pages/browser/Chrome/render/\"}]},{\"text\":\"源码解析\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"collapsed\":true,\"items\":[{\"text\":\"模版渲染\",\"link\":\"/pages/source/Vue/render/\"},{\"text\":\"生命周期\",\"link\":\"/pages/source/Vue/lifeCycle/\"},{\"text\":\"data数据代理\",\"link\":\"/pages/source/Vue/dataProxy/\"},{\"text\":\"nextTick\",\"link\":\"/pages/source/Vue/nextTick/\"},{\"text\":\"watch监听\",\"link\":\"/pages/source/Vue/watch/\"}]},{\"text\":\"React\",\"collapsed\":true,\"items\":[{\"text\":\"PureComponent原理\",\"link\":\"/pages/source/React/PureComponent/\"},{\"text\":\"React路由配置\",\"link\":\"/pages/source/React/router/\"},{\"text\":\"setState使用及原理\",\"link\":\"/pages/source/React/setState/\"}]}]},{\"text\":\"面试题\",\"collapsed\":true,\"items\":[{\"text\":\"Vue\",\"link\":\"/pages/interview/Vue/\"},{\"text\":\"HTML&CSS\",\"link\":\"/pages/interview/HC/\"}]}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>